<template>
  <div id="index">
    <div class="app-container"
      id="container">
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">基本信息</em>
          </div>
          <el-row :gutter="24">
            <el-col :span="21">
              <el-form-item label="论文标题"
                prop="productName">
                <el-input v-model="form.productName"
                  placeholder="请输入论文标题"
                  clearable
                  maxlength="200"
                  show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="论文类别"
                prop="categoryUid">
                <el-select v-model="form.categoryUid"
                  placeholder="请选择类别"
                  @change="changeMajor"
                  clearable>
                  <el-option v-for="unit in unitOptions"
                    :key="unit.groupUid"
                    :label="unit.groupName"
                    :value="unit.groupUid" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="论文专业"
                prop="majorUids"
                style="width: 100%;">
                <el-cascader style="width: 100%;"
                  v-model="form.majorUids"
                  :options="categoryOptions"
                  clearable
                  filterable>
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="论文编码"
                prop="productNo">
                <el-input v-model="form.productNo"
                  placeholder="请输入论文编码"
                  clearable
                  />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="论文页数"
                prop="pages">
                <el-input v-model="form.pages"
                  placeholder="请输入论文页数"
                  clearable
                  maxlength="3"
                  @input="form.pages=form.pages.replace(/^(0+)|[^\d]+/g, '')"
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="论文字数"
                prop="numbers">
                <el-input v-model="form.numbers"
                  placeholder="请输入论文字数"
                  clearable
                  @input="form.numbers=form.numbers.replace(/^(0+)|[^\d]+/g, '')"
                  maxlength="5"
                  show-word-limit>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="下载积分"
                prop="jifen">
                <el-input v-model="form.jifen"
                  placeholder="请输入下载积分"
                  clearable
                  maxlength="5"
                  @input="form.jifen=form.jifen.replace(/^(0+)|[^\d]+/g, '')"
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="买断积分"
                prop="costPrice">
                <el-input v-model="form.costPrice"
                  placeholder="请输入买断积分"
                  clearable
                  maxlength="5"
                  @input="form.costPrice=form.costPrice.replace(/^(0+)|[^\d]+/g, '')"
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="应用类型"
                prop="lunwenType">
                <el-select v-model="form.lunwenType"
                  placeholder="请选择品牌"
                  clearable>
                  <el-option v-for="dict in paperTypes" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="7">
              <el-form-item label="可过传统查重"
                prop="isTraditionDuplicate">
                <el-checkbox v-model="form.isTraditionDuplicate"></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="7">
             <el-form-item label="可过AIGC查重"
               prop="isTraditionDuplicate">
               <el-checkbox v-model="form.isAigcDuplicate"></el-checkbox>
             </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="21">
              <el-form-item label="论文标签"
                prop="tagsUid"
                style="width: 100%;">
                <el-select v-model="form.tagsUid"
                  placeholder="请选择标签"
                  clearable
                  multiple
                  style="width: 100%;">
                  <el-option v-for="tags in tagsOptions"
                    :key="tags.tagsUid"
                    :label="tags.tagsName"
                    :value="tags.tagsUid" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="展示文件"
              prop="showFile">
              <uploadFile :imageStr.sync="form.showFile"
                :size="200 * 1024 * 1024"
                :key="form.showFile"
                :msg="'文件要求：大小200M内。'"
                :limit="1"
                ref="childss">
              </uploadFile>
            </el-form-item>
          <el-form-item label="下载文件"
            prop="downloadFile">
            <uploadFile :imageStr.sync="form.downloadFile"
              :key="form.downloadFile"
              ref="childs"
              :msg="'文件要求：大小200M内。'"
              :limit="1"
              :size="200 * 1024 * 1024"></uploadFile>
          </el-form-item>
        </div>
      </el-form>
      <div class="dw">
        <el-button @click="backPro"
          style="margin-top: 10px;margin-left: 40%;">返回</el-button>
        <el-button type="primary"
          @click="submitForm"
          style="margin-top: 10px;">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {
  selectOptions
} from "@/api/product/category";

import {
  bulidTagsSelect,
  addTags
} from "@/api/product/tags";

import {
  firstGroupList,
} from "@/api/product/group";
import {
  addInfo,
  getInfo,
} from "@/api/product/info";

import uploadFile from "@/components/ImageUpload/uploadFile";
import {
  updateInfo,
  getProductNo
} from "@/api/product/info";

export default {
  name: "productData",
  components: {
    uploadFile
  },
  data () {
    return {
      roles: 0,
      roleRule: 0,
      // 遮罩层
      loading: true,
      // 论文类别
      unitOptions: [],
      // 论文标签
      tagsOptions: [],
      // 论文专业
      categoryOptions: [],
      allCategoryOptions: [],
      selectCategoryUid:0,

      // 查询参数
      queryParams: {},
      columns: [],
      paperTypes:[],
      // 表单参数
      form: {
        productUid:null,
        productNo: "",
        productName: "",
        showPrice: "",
        pages:"",
        numbers:"",
        jifen:"",
        costPrice:"",
        isCategoryRecommend: "0",
        auditStatus: "0",
        showFile:"",
        downloadFile:"",
        isAigcDuplicate:false,
        isTraditionDuplicate:false,
      },
      // 表单校验
      rules: {
        productName: [{
          required: true,
          message: "论文标题不能为空",
          trigger: "blur"
        }],

        categoryUid: [{
          required: true,
          message: "论文分类不能为空",
          trigger: "blur"
        }],

        majorUids: [{
          required: true,
          message: "论文专业不能为空",
          trigger: "blur"
        }],
        productNo: [{
          required: true,
          message: "论文编码不能为空",
          trigger: "blur"
        }],
        pages: [{
          required: true,
          message: "论文页数不能为空",
          trigger: "blur"
        }],
        numbers: [{
          required: true,
          message: "论文字数不能为空",
          trigger: "blur"
        }],

        jifen: [{
          required: true,
          message: "下载积分不能为空",
          trigger: "blur"
        }],
        costPrice: [{
          required: true,
          message: "买断积分不能为空",
          trigger: "blur"
        }],
      },
    };
  },
  created () {
    let $this = this
    $this.bulidSelect();
    const productUid = $this.$route.params && $this.$route.params.productUid;
    if (productUid) {
      getInfo(productUid).then(response => {
        $this.notNor = 2;
        $this.form = response.data
        $this.displayBool = 1;
        $this.selectCategoryUid = $this.form.categoryUid;
        $this.changeMajor($this.form.categoryUid);
      });
    }
  },
  methods: {
    changeMajor(row){
      //console.log(" row==>"+row);
      this.categoryOptions = [];
      this.allCategoryOptions.forEach(cate =>{
        if(cate.groupUid == row){
          this.categoryOptions.push(cate);
        }
      });
    },

    /**各种下拉框 */
    bulidSelect () {
      // 分类
      selectOptions().then(response => {
        this.allCategoryOptions = response.data;
        if (this.selectCategoryUid>0){
          this.changeMajor(this.selectCategoryUid);
        }

      });
      firstGroupList().then(respone => {
        this.unitOptions = respone.data;
      });

      this.getDicts("paper_app_type").then(response => {
        this.paperTypes = response.data;
      });

      bulidTagsSelect().then(respone => {
        this.tagsOptions = respone.data;
      });
      let arr = this.$store.state.user.roles;
      let index = arr.length;
    },
    /** 提交按钮 */
    submitForm () {

      this.$refs.childs.selectImgs();
      this.$refs.childss.selectImgBanner();

      if (this.form.showFile == null || this.form.showFile == "") {
        this.$message.error("请上传论文展示文件");
        return;
      }
      if (this.form.downloadFile == null || this.form.downloadFile == "") {
        this.$message.error("请上传论文下载文件");
        return;
      }

      this.$refs["form"].validate(valid => {
        if (valid) {

          const productUid = this.$route.params && this.$route.params.productUid;
          console.log(this.form)
          if (productUid) {
            this.form.productUid = productUid;
            updateInfo(this.form).then(respone => {
              this.msgSuccess("修改成功");
              this.colsePro();
            }).cache({

            });
          } else {
            addInfo(this.form).then(respone => {
              this.msgSuccess("添加成功");
              this.colsePro();
            }).cache({

            });
          }
        }
      });
    },

    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/info",
        query: {
          t: Date.now()
        }
      });
    },
    backPro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/info",
        query: {
          t: Date.now()
        }
      });
    }
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}
</style>
